<template>
  <transition name="fade">
    <div v-if="visible" class="header-detail">
      <div class="detail-wrapper">
        <div class="name">{{seller.name}}</div>
        <star :size="48" :score="seller.score"></star>
        <div class="title">
          <div class="line"></div>
          <h2 class="text">优惠信息</h2>
          <div class="line"></div>
        </div>
        <ul class="supports">
          <li class="supports-item" v-for="(item, index) in seller.supports" :key="index">
            <support-ico :size="2" :type="item.type"></support-ico>
            <span class="support-text">{{item.description}}</span>
          </li>
        </ul>
        <div class="title">
          <div class="line"></div>
          <h2 class="text">商家公告</h2>
          <div class="line"></div>
        </div>
        <p class="bulletin">{{seller.bulletin}}</p>
      </div>
      <div class="detail-close">
        <i class="icon-close" @click="hide"></i>
      </div>
    </div>
  </transition>
</template>
<script>
import Star from '../star/star.vue'
import supportIco from '../support-ico/support-ico.vue'
import popupMixin from '../../common/mixins/popup'
export default {
  mixins: [popupMixin],
  name: 'header-detail',
  props: {
    seller: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  components: {
    Star,
    supportIco
  }
}
</script>
<style lang="stylus" scoped>
@import '../../common/stylus/variable'
@import '../../common/stylus/mixin'

.header-detail
  position fixed
  top 0
  right 0
  bottom 0
  left 0
  background $color-background-s
  &.fade-enter-active, &.fade-leave-active
      transition: all 0.5s
  &.fade-enter, &.fade-leave-to
    opacity: 0
    background: $color-background
  .detail-wrapper
    position absolute
    top 0
    right 0
    bottom 80px
    left 0
    padding-top 64px
    overflow auto
    .name
      line-height 16px
      text-align center
      font-size $fontsize-large
      font-weight 700
      color $color-white
    .star
      margin-top 16px
      text-align center
    .title
      display flex
      padding 0 36px
      margin-top 28px
      justify-content center
      .text
        margin 0 12px
        font-size $fontsize-medium
        color $color-white
      .line
        flex 1
        margin-top 5px
        height 1px
        border-bottom solid 1px rgba(255, 255, 255, 0.2)
    .supports
      margin 24px 0 0 36px
      &-item
        display flex
        align-items center
        margin-bottom 12px
        .support-ico
          width 16px
          margin-right 6px
        .support-text
          flex 1
          line-height 24px
          color $color-white
          fonts-size $fontsize-small
          font-weight 200
    .bulletin
      padding 24px 48px
      line-height 24px
      font-size $fontsize-small
      font-weight 200
      color $color-white
  .detail-close
    position absolute
    left 0
    right 0
    bottom 32px
    text-align center
    .icon-close
      font-size 32px
      color rgba(255, 255, 255, 0.5)
</style>
